<template>
    <div class="edit">
        <!-- 资料编辑 -->
        <div class="edit-data">
            <Header title="我的资料" to='/personal/setting'></Header>
            <div class="edit-data-save" @click="change">保存</div>
            <div class="edit-data-detail edit-data-detail-img">
                <router-link class="edit-data-detail-mgs" to="/personal/setting/edit/head-portrait">
                    <p>
                      <span>头像</span>
                      <i class="iconfont">&#xe7eb;</i>
                    </p>
                </router-link>
            </div>
            <div class="edit-data-detail">
                <div class="edit-data-detail-mgs">
                    <p>
                        <span>昵称</span>
                        <input class="edit-data-msg" v-model="name"/>
                    </p>
                </div>
            </div>
            <div class="edit-data-detail">
                <div class="edit-data-detail-mgs">
                    <p>
                        <span>手机号</span>
                        <input class="edit-data-msg" v-model="phone"/>
                    </p>
                </div>
            </div>
            <div class="edit-data-detail">
                <div class="edit-data-detail-mgs">
                    <p>
                        <span>年龄</span>
                        <input class="edit-data-msg" v-model="age">
                    </p>
                </div>
            </div>
            <div class="edit-data-detail">
                <div class="edit-data-detail-mgs">
                    <p>
                        <span>性别</span>
                        <input class="edit-data-radio" v-model="sex" name="sex" type="radio" value="男"/>男
                        <input name="sex" type="radio" v-model="sex" value="女" />女
                    </p>
                </div>
            </div>

        </div>
        <div class="feedback-prompt" v-if="this.appear">
            <span>信息修改成功</span>
        </div>

    </div>
</template>

<script>
import axios from 'axios'
// import qs from 'qs'
import { garbageMixin } from '../../utils/mixin'
import { setLocalStorage, getLocalStorage } from '../../utils/localStorage'
import Header from '../common/Header'
export default {
  mixins: [garbageMixin],
  components: {
    Header
  },
  data () {
    // console.log('this.$store.getters.', this.$store.getters)
    return {
      appear: false,
      name: this.$store.getters.userName,
      sex: this.$store.getters.userSex,
      age: this.$store.getters.userAge,
      phone: this.$store.getters.userPhone
    }
  },
  methods: {
    change () {
    //  这里要做两个操作，将修改后的信息发回服务器
    //  将修改后的信息写到vuex里，这样当程序其他的部分使用vuex里这部分数据时，会自动使用最新的数据

    // 发回服务器 没有接口暂时不能做

    // 写到vuex里

      this.$store.dispatch('setUserName', this.name)
      this.$store.dispatch('setUserAge', this.age)
      this.$store.dispatch('setUserSex', this.sex)
      let eData = this.$qs.stringify({
        name: this.name,
        sex: this.sex,
        age: this.age,
        phone: this.phone
      })
      let sessionId = getLocalStorage('sessionId')
      axios.put('/user', eData, {headers: {'sessionId': sessionId}})
        .then((response) => {
          console.log(response, 'uuu', response.status)
          if (response.data.code === 1) {
            // alert('信息修改成功')
            this.setUserName(this.name)
            this.setUserPhone(this.phone)
            this.setUserAge(this.age)
            this.setUserSex(this.sex)
            setLocalStorage('userName', this.name)
            setLocalStorage('userPhone', this.phone)
            setLocalStorage('userAge', this.age)
            setLocalStorage('userSex', this.sex)
            sessionStorage.username = this.name
            sessionStorage.phone = this.phone
            sessionStorage.age = this.age
            sessionStorage.sex = this.sex
            this.appear = true
            setTimeout(() => {
              this.appear = false
            }, 2000)
          } else {
            this.$message({
              message: '修改信息失败，请检查是否填了必要信息',
              type: 'warning'
            })
          }
        })
        .catch((error) => {
          console.log(error, 'kk')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
.edit {
    width: 100%;
    .edit-data {
        width: 100%;
        font-size: 14px;
        position: relative;
        .edit-data-save {
          position: absolute;
          top: 12px;
          right: 12px;
          &:active {
            color: white;
          }
        }
        .edit-data-detail {
            height: 50px;
            background: #fff;
            display: flex;
            position: relative;
            .edit-data-detail-mgs {
                color: black;
                text-decoration: none;
                display: flex;
                width: 100%;
                p {
                    align-self: center;
                    width: 100%;
                    span {
                      position: absolute;
                      top: 18px;
                      left: 12px;
                    }
                    .edit-data-msg {
                        border: 1px solid white;
                        height: 44px;
                        width: 100%;
                        padding-left: 54px;
                        color: #555;
                    }
                    .edit-data-radio {
                      margin-left: 54px;
                    }
                    .iconfont {
                        position: absolute;
                        top: 20px;
                        right: 12px;
                        color: #ccc
                    }
                }
            }
        }
        .edit-data-detail-img {
            margin-bottom: 18px;
        }
    }
    .feedback-prompt {
      background: #000;
      color: white;
      opacity: 0.4;
      font-size: 14px;
      width: 160px;
      height: 54px;
      line-height: 54px;
      border-radius: 10px;
      text-align: center;
      position: absolute;
      top: 170px;
      left: 100px;
    }
}
</style>
